//职员管理

import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Button, Table, Modal, Row, Upload, Icon, DatePicker, Select, Pagination} from 'antd';
import {project, employee, order} from '../value';
import '../css/other.css';
import '../css/userManage.css';
import moment from 'moment';
import {config} from "../config";


const FormItem = Form.Item;
const confirm = Modal.confirm;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;

class OrderList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchData: {},
            pagination: {current: 1, pageSize: 10, total: 0},
            positionId: [],
            data: [
                {
                    order: '01',
                    order_number: 1,
                    customer_name: 1,
                    status: 1,
                    money: 12,
                    good_type: '饼干',
                    created_at: '2018-12-12',
                    is_team: 1,
                    remark: '加速'
                },
                {
                    order: '02',
                    order_number: 1,
                    customer_name: 1,
                    status: 1,
                    money: 12,
                    good_type: '饼干',
                    created_at: '2018-12-12',
                    is_team: 2,
                    remark: '加速'
                }
            ],
            currentPageSize: 0,
            pageCount: 0,
            imgUrl: '',
        }
    }

    columns = [
        {
            title: '订单号',
            dataIndex: 'order_number'
        },
        {
            title: '客户名',
            dataIndex: 'user_nickname'
        },
        {
            title: '总价',
            dataIndex: 'order_totalPrice'
        },
        {
            title: '修改后总价',
            dataIndex: 'order_afterTotalPrice'
        },
        {
            title: '红包优惠价格',
            dataIndex: 'order_couponPrice'
        },
        {
            title: '活动优惠价格',
            dataIndex: 'order_discountPrice'
        },
        {
            title: '团购优惠价格',
            dataIndex: 'order_collagePrice'
        },
        {
            title: '订单状态',
            dataIndex: 'order_status',
            render: order_status => {
                let text = '';
                switch (order_status) {
                    case '1':
                        text = '待支付';
                        break;
                    case '2':
                        text = '待接单';
                        break;
                    case '3':
                        text = '已接单';
                        break;
                    case '4':
                        text = '待发货';
                        break;
                    case '5':
                        text = '已发货';
                        break;
                    case '6':
                        text = '已完成';
                        break;
                    case '7':
                        text = '已取消';
                        break;
                }
                return (
                    <span>{text}</span>
                )
            }
        },
        {
            title: '创建时间',
            dataIndex: 'order_createtime',
            render: order_createtime => {
                return (
                    <span>{moment(order_createtime).format('YYYY-MM-DD HH:mm:ss')}</span>
                )
            }
        },
        {
            title: '是否团购',
            dataIndex: 'isCollage',
            render: isCollage => {
                return (
                    <span>{
                        isCollage === '1' ?
                            <span style={{color: 'red'}}>是</span>
                            :
                            <span style={{color: '#999'}}>否</span>
                    }</span>
                )
            }
        },
        {
            title: '客户备注',
            dataIndex: 'order_remark'
        },
        {
            title: '操作',
            dataIndex: this.columns,
            render: data => {
                return (
                    <div>
                        <Button type="primary"
                                onClick={() => this.handleRedirectDetail(data.order_id)}>详情</Button>
                        <Button style={{marginLeft: '10px'}} type="danger"
                                onClick={() => this.handleDeleteUser(data.id, 7)}>取消</Button>
                    </div>
                )
            }
        },
    ];

    render() {
        const rowSelection = {
            // 表格中复选框发生变化时
            onChange: (selectedRowKeys, selectedRows) => {
                let positionName = [];
                selectedRows.forEach((item) => {
                    positionName.push(item.role_name);
                });
                this.setState({
                    positionId: selectedRowKeys,  //批量选中的职位ID
                    positionName: positionName,
                    selectCount: selectedRowKeys.length, //一共选择的职位数量
                })
            },

        };
        return (
            <div style={{paddingBottom: 25}}>
                <div className="pageTitle">
                    订单管理
                </div>
                <SearchLists refresh={() => this.handleRefreshAfterCreate()}
                             clickSearch={(values) => this.handleGetValue(values)}/>

                <div className={'btnContainer'}>
                    <Button type={'primary'} onClick={() => this.handleSendGood()}>批量发货</Button>
                    <Button type={'primary'} onClick={() => this.handleMatchGood()}>批量配货</Button>
                    <Button type={'danger'} onClick={() => this.handleCancelGood()}>批量取消订单</Button>
                </div>
                <Row style={{marginTop: '20px'}}>
                    <Table
                        rowSelection={rowSelection}
                        columns={this.columns}
                        rowKey={(record, index) => index}
                        dataSource={this.state.data}
                        loading={this.state.loading}
                        pagination={false}
                        onChange={this.handleTableChange}
                    />
                </Row>
                <Row style={{textAlign: 'right', marginTop: 20}}>
                    <Pagination {...this.state.pagination} showSizeChanger showQuickJumper
                                onChange={(page, pageSize) => this.handleOnChange(page, pageSize)}
                                onShowSizeChange={(current, size) => this.handleOnShowSizeChange(current, size)}/>
                </Row>
            </div>
        )
    }

    /**
     * 初始化
     */
    componentDidMount() {
        const param = {
            page: 1,
            size: 10
        };
        this.handleSearchOrderList(param);
    }

    /**
     * 获取搜索条件
     */
    handleGetValue(value) {
        const searchData = {
            numberSearch: value.numberSearch,
            nicknameSearch: value.nicknameSearch,
            statusSearch: value.statusSearch,
            priceSearch: value.priceSearch
        };
        this.setState({searchData});
        const param = {
            page: 1,
            size: 10,
            ...searchData
        };
        this.handleSearchOrderList(param);
    }

    /**
     * 处理创建后刷新事件
     */
    handleRefreshAfterCreate() {
        const param = {};
        this.handleSearchOrderList(param);
    }

    /**
     * 处理删除后刷新事件
     */
    handleRefreshAfterDelete() {
        const {searchData} = this.state;
        const param = {
            page: 1,
            size: 10,
            ...searchData
        };
        this.handleSearchOrderList(param);
    }

    /**
     * 处理更新后刷新事件
     */
    handleRefreshAfterUpdate() {
        const {searchData} = this.state;
        const param = {
            ...searchData
        };
        this.handleSearchOrderList(param);
    }

    /**
     * 处理页码、显示数量变化事件
     * @param pagination
     * @param filters
     * @param sorter
     */
    handleTableChange = (pagination, filters, sorter) => {
        const current = pagination.current;
        const size = pagination.pageSize;
        const pagination1 = this.state.pagination;
        pagination1.current = current;
        pagination1.pageSize = size;
        this.setState({pagination: pagination1});
    };

    /**
     * 处理页面改变事件
     * @param page
     * @param pageSize
     */
    handleOnChange(page, pageSize) {
        const {searchData} = this.state;
        const param = {
            page,
            size: pageSize,
            ...searchData
        };
        this.handleSearchOrderList(param);
    }

    /**
     * 处理pageSize变化回调
     * @param current
     * @param size
     */
    handleOnShowSizeChange(current, size) {
        const {searchData} = this.state;
        const param = {
            page: current,
            size,
            ...searchData
        };
        this.handleSearchOrderList(param);
    }

    /**
     * 查找订单列表
     * @param param
     */
    handleSearchOrderList(param) {
        let _this = this;
        _this.setState({loading: true});
        app.post(order.SEARCH_ORDER_LIST, param).then(result => {
            if (result.code === 1) {
                const data = result.data;
                const pagination = {total: result.count, current: param.page, pageSize: param.size};
                this.setState({pagination, data: data, loading: false});
            } else {
                app.alert(result.msg, 'success', 1);
                const pagination = {total: 0, current: 0, pageSize: 0};
                this.setState({pagination, data: [], loading: false});
            }
        });
    }

    /**
     * 取消订单
     * @param id
     * @param type
     */
    handleDeleteUser(id, type) {
        let _this = this;
        confirm({
            content: '您确定要取消该订单吗？',
            onOk() {
                app.post(order.UPDATE_ORDER_STATUS, {order_id: id, order_status: '7'}).then((req) => {
                    if (req.code == '1') {
                        app.alert("取消成功", 'success', 2);
                        _this.handleRefreshAfterDelete();
                    } else {
                        app.alert(req.msg, 'error', 2);
                    }
                })
            },
            onCancel() {
            },
        });
    }

    /**
     * 操作用户状态
     */
    handleEditStatus(id, type) {

    }

    /**
     * 跳转详情页
     */
    handleRedirectDetail(id) {
        this.props.history.push(config.path + '/home/orderDetail/' + id);
    }

    /**
     * 批量发货
     */
    handleSendGood() {
        let positionId = this.state.positionId;
        if (positionId.length <= 0) {
            app.alert('请选择订单', 'error', 1);
            return;
        }
        console.log(positionId);
    }

    /**
     * 批量配货
     */
    handleMatchGood() {
        let positionId = this.state.positionId;
        if (positionId.length <= 0) {
            app.alert('请选择订单', 'error', 1);
            return;
        }
        console.log(positionId);
    }

    /**
     * 批量取消订单
     */
    handleCancelGood() {
        let positionId = this.state.positionId;
        if (positionId.length <= 0) {
            app.alert('请选择订单', 'error', 1);
            return;
        }
        console.log(positionId);
    }
}


class SearchList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            project_name: '',
            typeList: [
                {
                    id: '01',
                    name: '会员注册奖励'
                }
            ],
            type: '<'
        }
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        const dateFormat = 'YYYY-MM-DD';
        return (
            <div className={'user-search-container'}>
                <div className={'user-search-item1'}>
                    <div className={'user-search-item-type'}>订单号：</div>
                    <Input placeholder={'订单号'} style={{width: '180px'}}
                           onChange={(e) => this.handleUserNameChange(e)}
                           onPressEnter={(e) => this.handleUserNamePress(e)}/>
                </div>
                <div className={'user-search-item1'} style={{marginLeft: '10px'}}>
                    <div className={'user-search-item-phone'}>客户名称：</div>
                    <Input placeholder={'客户名称'} style={{width: '150px'}}
                           onChange={(e) => this.handlePhoneChange(e)}
                           onPressEnter={(e) => this.handlePhonePress(e)}/>
                </div>
                <div className={'user-search-item1'} style={{marginLeft: '10px'}}>
                    <div className={'user-search-item-status'}>订单状态：</div>
                    <Select style={{width: '150px'}} placeholder={'请选择状态'} onChange={(e) => this.handleStatusChange(e)}>
                        <Option value="">全部</Option>
                        <Option value="1">待支付</Option>
                        <Option value="2">待接单</Option>
                        <Option value="3">已接单</Option>
                        <Option value="4">待发货</Option>
                        <Option value="5">已发货</Option>
                        <Option value="6">已完成</Option>
                        <Option value="7">已取消</Option>
                    </Select>
                </div>

                <div className={'user-search-item2'}>
                    <div className={'user-search-item-status'} style={{width: '70px'}}>订单总额{this.state.type}=</div>
                    <Input placeholder={'总额'} style={{width: '90px'}}
                           onChange={(e) => this.handleMoneyChange(e)}
                           onPressEnter={(e) => this.handleMoneyPress(e)}/>
                </div>
                <div className={'user-search-footer'}>
                    <Button type="primary" onClick={() => this.handleSearchComplain()}>搜索</Button>
                    {/*<AddInvitationActivitys refresh={() => this.handleRefreshAfterCreate()}></AddInvitationActivitys>*/}
                </div>
            </div>
        )
    };

    componentDidMount() {
    };

    /**
     * 处理用户名输入框变化事件
     * @param e
     */
    handleUserNameChange(e) {
        this.setState({user_name: e.target.value});
    }

    /**
     * 处理手机号输入框变化事件
     * @param e
     */
    handlePhoneChange(e) {
        this.setState({phone: e.target.value});
    }

    /**
     * 处理种类状态框变化事件
     * @param e
     */
    // handleGoodStatusChange(e) {
    //     this.setState({good_status: e.target.value});
    // }

    /**
     * 处理订单总额输入框变化事件
     * @param e
     */
    handleMoneyChange(e) {
        this.setState({money: e.target.value});
    }

    /**
     * 状态选择变化事件
     * @param e
     */
    handleStatusChange(e) {
        this.setState({status: e});
        this.handleSearchComplain1({key: 'status', value: e});
    }

    handleUserNamePress(e) {
        this.handleSearchComplain1({key: 'user_name', value: e.target.value});
    }

    handlePhonePress(e) {
        this.handleSearchComplain1({key: 'phone', value: e.target.value});
    }

    // handleGoodStatusPress(e) {
    //     this.handleSearchComplain1({key: 'good_status', value: e.target.value});
    // }

    handleMoneyPress(e) {
        this.handleSearchComplain1({key: 'money', value: e.target.value});
    }

    /**
     * 获取搜索条件
     */
    handleSearchComplain1(param) {
        let {user_name, phone, status, money} = this.state;
        if (param.key === 'user_name') {
            user_name = param.value;
        }
        if (param.key === 'phone') {
            phone = param.value;
        }
        if (param.key === 'status') {
            status = param.value;
        }
        // if (param.key === 'good_status') {
        //     good_status = param.value;
        // }
        if (param.key === 'money') {
            money = param.value;
        }
        let data = {
            numberSearch: user_name,
            nicknameSearch: phone,
            statusSearch: status,
            priceSearch: money
        };
        this.props.clickSearch(data);
    };

    /**
     * 搜索
     */
    handleSearchComplain() {
        let {user_name, phone, status, money} = this.state;
        let data = {
            numberSearch: user_name,
            nicknameSearch: phone,
            statusSearch: status,
            priceSearch: money
        };
        this.props.clickSearch(data);
    }
}

const SearchLists = Form.create()(SearchList);
const OrderLists = Form.create()(OrderList);

export default OrderLists;


